<template>
  <!-- 主要音乐弹出层组件 这是一个被vuex管理的组件 -->
  <el-dialog
    :title="toastObj.title"
    :visible="toastObj.toastShow"
    :before-close="closeHandler"
    center
    custom-class="toast-class"
    width="80%"
  >
    <!-- 添加音乐的操作 不过只有自定义的歌单列表才展示 -->
    <div
      v-show="toastObj.custom"
      class="el-icon-circle-plus-outline add-music"
      @click="addMusicHandler"
    >
      添加音乐
    </div>

    <!-- 判断数据长度 如果为零 就不展示 -->
    <!-- 判断是不是自定义歌单 如果是 上外边距0.6rem -->
    <ul
      v-show="toastObj.toastData.length"
      class="toast-data"
      :style="toastObj.custom ? 'margin-top: 0.6rem;' : ''"
    >
      <!-- 判断选中样式 判断当前播放的音乐是否等于列表中的某一条 如果等于加上选中样式 -->
      <li
        :class="
          music_play.musicId === toastObj.toastData[idx].musicId
            ? 'activeFontColor'
            : ''
        "
        class="data-item"
        v-for="(data, idx) in toastObj.toastData"
        :key="data.musicId"
        @click="musicPlay(data)"
      >
        <!-- 点击播放 -->
        <div class="toast-l" title="点击播放">
          <!-- 音乐名称 -->
          <span class="music_name">{{ data.name }}</span
          >-
          <!-- 演唱者名称 -->
          <span class="music_author">{{ data.author }}</span>
        </div>

        <!-- 判断是不是搜索过来的数据 -->
        <template v-if="toastObj.title.indexOf('关键字') === -1">
          <!-- 判断是不是播放列表打开 如果是播放列表打开 添加一个移除按钮-->
          <div
            v-if="toastObj.title === '播放列表'"
            class="toast-r"
            title="移除"
            @click.stop="removeMusic({ musicId: data.musicId, idx })"
          >
            <img src="../../assets/index/close-c.png" alt="移除" />
          </div>
          <!-- 不是播放列表展示下面的内容 -->
          <div class="collect" v-else>
            <!-- 收藏按钮 -->
            <span
              title="收藏"
              @click.stop="collect(data)"
              class="collect-icon"
              v-show="data.islike"
              ><img src="../../assets/index/collect_active.png" alt=""
            /></span>

            <!-- 取消收藏 -->
            <span
              title="取消收藏"
              @click.stop="collect(data)"
              class="collect-icon"
              v-show="!data.islike"
              ><img src="../../assets/index/collect.png" alt=""
            /></span>

            <!-- 已加入播放列表 -->
            <span
              title="已加入播放列表"
              class="setout-icon"
              v-show="data.setout"
              ><img src="../../assets/index/yes.png" alt=""
            /></span>

            <!-- 加入播放列表 -->
            <span
              title="加入播放列表"
              @click.stop="addSetOut(data)"
              class="setout-icon"
              v-show="!data.setout"
              ><img src="../../assets/index/no.png" alt=""
            /></span>
          </div>
        </template>
      </li>
    </ul>
    <EmptyTips tips="暂无音乐" v-show="!toastObj.toastData.length"></EmptyTips>
  </el-dialog>
</template>

<script>
import EmptyTips from "@/components/public/EmptyTips";
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "MusicToast",
  components: { EmptyTips },
  computed: {
    /* 弹出层对象 以及音乐索引 */
    ...mapState("music", ["toastObj", "m_idx"]),
    /* 获取播放列表 */
    ...mapGetters("music", ["music_setout"]),
    /* 计算当前播放的音乐 */
    music_play() {
      return this.music_setout[this.m_idx];
    },
  },
  methods: {
    /* 播放音乐的方法 */
    ...mapActions("music", ["playMusic"]),
    /* 弹出层操作、 移除播放列表中音乐、 收藏音乐 添加到播放列表*/
    ...mapMutations("music", [
      "TOASTOPERA",
      "MUSICLISTREMOVE",
      "COLLECT",
      "ADDSETOUT",
    ]),
    /* 往当前歌单里添加音乐 */
    addMusicHandler() {
      /* 定义全局事件 */
      this.$bus.$emit("addmusic", true, this.toastObj);
      /* 关闭当前的弹出层 */
      this.closeHandler();
    },
    /* 关闭弹出层 */
    closeHandler() {
      this.TOASTOPERA({
        toastShow: false,
        toastData: [],
        title: "",
        custom: false,
      });
    },
    /* 移除播放列表中的音乐 */
    removeMusic(obj) {
      if (this.toastObj.toastData.length > 1) {
        this.MUSICLISTREMOVE(obj);
        this.toastObj.toastData.splice(obj.idx, 1);
      } else {
        this.$message({
          showClose: true,
          message: "必须要留一首歌噢,亲~",
          type: "warning",
          duration: 1000,
        });
      }
    },
    /* 播放音乐 */
    musicPlay(data) {
      /* TODO 如果是搜索来的先暂时不允许播放 */
      if (this.toastObj.title.indexOf("关键字") !== -1) {
        return;
      }
      /* 提交播放音乐 业务处理函数 */
      this.playMusic(data);
    },
    /* 收藏/取消收藏 */
    collect(data) {
      this.COLLECT(data);
    },
    /* 加入播放列表 */
    addSetOut(data) {
      this.ADDSETOUT(data);
    },
  },
};
</script>

<style lang="less" >
.add-music {
  position: absolute;
  right: 10%;
  cursor: pointer;
  z-index: 888;
}
.toast-class {
  background: linear-gradient(to top, #2c5364, #203a43, #0f2027) !important;
}
.el-dialog__header {
  color: #ffcff1 !important;
  .el-dialog__title {
    color: inherit;
  }
}
.toast-data {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: 350px;
  overflow: auto;
  .data-item {
    display: flex;
    padding: 0.2rem 0.2rem;
    padding-right: 0.5rem;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: #aaa;
    &:hover {
      color: #ffcff1;
    }
    &.activeFontColor {
      color: #ffcff1;
    }
    .toast-r {
      height: 0.3rem;
      width: 0.3rem;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .collect {
      display: flex;
      align-items: center;
      .collect-icon,
      .setout-icon {
        width: 0.4rem;
        height: 0.4rem;
        img {
          height: 100%;
          width: 100%;
        }
      }
      .collect-icon {
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.3rem;
      }
    }
  }
}
</style>